<template>
  <div class="box">
    <div class="body">
      <el-row>
        <el-col :span="8" class="el_col">
          <div class="grid-content bg-purple">
            <el-input
              v-model="input"
              placeholder="请输入内容"
              class="input"
            ></el-input>
          </div>
          <el-button @click="removeInput">清空</el-button>
          <el-button class="btn2" @click="searchUser">搜索</el-button>
        </el-col>
        <el-col :span="8"
          ><div class="grid-content bg-purple-light"></div
        ></el-col>
        <el-col :span="8" class="el_colright">
          <div class="grid-content bg-purple">
            <el-button type="primary" icon="el-icon-edit" @click="addUser"
              >新增用户</el-button
            >
          </div></el-col
        >
      </el-row>

<headerVue :title="counts" />

      <template class="el_template">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="序号" width="180">
          </el-table-column>
          <el-table-column prop="email" label="邮箱" width="180">
          </el-table-column>
          <el-table-column prop="phone" label="联系电话"> </el-table-column>
          <el-table-column prop="username" label="用户名"> </el-table-column>
          <el-table-column prop="permission_group_title" label="权限组名称">
          </el-table-column>
          <el-table-column prop="role" label="角色"> </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <div v-if="row.id !== 2 && row.id !== 4">
                <i class="el-icon-edit" @click="changeUser(row.id)"></i>
                <i class="el-icon-delete" @click="delUser(row.id)"></i>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
     <pageToolVue :total="total" :paginationPage="renderObj.page" :paginationPagesize="renderObj.pagesize" @pageChange="changeNowSize" @changSize="changSize" />
    </div>
    <userAdd
      ref="userAdd"
      :text="text"
      :pageTitle="pageTitle"
      :PermissionGroupsList="PermissionGroupsList"
      :ruleInline="ruleInline"
      :formBase="formBase"
      @newDataes="newDataes"
    />
  </div>
</template>

<script>
import { list, detail, remove } from '@/api/base/users.js'
import { simple } from '@/api/base/permissions.js'
import userAdd from '@/module-manage/components/user-add'
import headerVue from '../components/header.vue'
import pageToolVue from '@/module-manage/components/page-tool'
export default {
  components: {
    userAdd, headerVue, pageToolVue
  },
  data () {
    return {
      input: '',
      tableData: [],
      renderObj: {
        page: 1,
        pagesize: 10
      },
      total: 0,
      PermissionGroupsList: [],
      ruleInline: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入电话', trigger: 'blur' }]
      },
      text: '',
      pageTitle: '',
      formBase: {
        username: '',
        email: '',
        password: '',
        role: '',
        permission_group_id: '',
        phone: ''
      },
      counts: ''
    }
  },
  created () {
    this.getUserList()
  },

  methods: {
    async getUserList () {
      const { data } = await list(this.renderObj)
      this.tableData = [...data.list]
      this.counts = data.counts
      this.total = data.counts
    },
    changSize (value) {
      this.renderObj.pagesize = value
      this.getUserList()
    },
    changeNowSize (value) {
      this.renderObj.page = value
      this.getUserList()
    },
    async getPermission () {
      const { data } = await simple()
      this.PermissionGroupsList = [...data]
    },
    addUser () {
      this.getPermission()
      this.text = '新增'
      this.pageTitle = '用户'
      this.$refs.userAdd.dialogFormV()
    },
    newDataes (formBase) {
      this.formBase = {
        username: '',
        email: '',
        password: '',
        role: '',
        permission_group_id: '',
        phone: ''
      }
      this.renderObj.page = 1
      this.renderObj.pagesize = 10
      this.$refs.userAdd.dialogFormH()
      this.getUserList()
    },
    async changeUser (id) {
      this.text = '编辑'
      this.pageTitle = '用户'
      this.getPermission()
      this.formBase.id = id
      const { data } = await detail(this.formBase)
      this.formBase = { ...data }
      delete this.formBase.last_update_time
      delete this.formBase.create_time
      this.$refs.userAdd.dialogFormV()
    },
    delUser (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.formBase.id = id
          await remove(this.formBase)
          this.getUserList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    async searchUser () {
      if (this.input) {
        const { data } = await simple({ username: this.input })
        this.tableData = [...data]
      }
    },
    removeInput () {
      this.input = ''
      this.getUserList()
    }
  }
}
</script>

<style scoped lang="less">
.box {
  padding: 20px;
}
.body {
  padding: 20px;
  background-color: #fff;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.bg-purple {
  background: #fff;
}
.bg-purple-light {
  background: #fff;
}
.input {
  width: 200px;
}
.el_col {
  display: flex;
  button {
    width: 56px;
    font-size: 12px;
    margin-left: 15px;
    text-align: center;
    padding: 0;
  }
  .btn2 {
    background-color: #409eff;
    color: #fff;
  }
}
.el_colright {
  display: flex;
  justify-content: flex-end;
  button {
    font-size: 12px;
    width: 97px;
    background-color: #67c23a;
    padding: 9px 15px 9px 15px;
  }
}
.warning {
  height: 35px;
  background-color: #f4f4f5;
  font-size: 13px;
  color: #909399;
  padding: 8px 16px;
  margin-bottom: 20px;
  span {
    margin-left: 8px;
  }
}
/deep/.el-table {
  .cell {
    text-align: center;
    font-size: 14px;
  }
}
/deep/.has-gutter {
  background-color: #f4f4f5 !important;
}
.el_pagination {
  padding-top: 20px;
  display: flex;
  justify-content: flex-end;
}
/deep/.el-pagination__jump {
  margin-left: 5px;
}
.el-icon-edit {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background-color: #ecf5ff;
  color: #409eff;
  line-height: 37px;
}
.el-icon-delete {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background-color: #fef0f0;
  color: #f56c6c;
  line-height: 37px;
}
</style>
